<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            /* 背景图片和背景颜色是一样的，撑不起盒子的高度 */
            /* 背景原始多大，在网页上显示就多大 */
            /* background-image: url("./images/02.webp"); */
            /* background-color: red; */

            /* 如果你要给盒子添加背景颜色或背景图片，那么这个盒子必须要有宽度 */
            /* 如果盒子的宽高大于背景图片的宽高，那么这个图片会平铺。 */
            width: 800px;
            height: 800px;

            /* 背景图片默认会填充padding */
            /* 背景图片的左上角默认是和padding的左上角对齐的 */
            padding: 50px;

            /* 背景图片默认也会填充border */
            border: 30px dotted red;

            /* 控制背景图片是否平铺 */
            /* no-repeat表示不平铺 */
            background-repeat: no-repeat;
            /* background-repeat: repeat; */

            /* bgs设置背景图上的大小 */
            /* background-size: 100px 100px; */
            /* background-size: 50% 50%; */
            /* background-size: auto; */
            background-size: contain;
            /* background-size: cover; */

            background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile.moyublog.com%2Fd%2Ffile%2F2021-09-21%2Fz5aiisqetxt.jpg&refer=http%3A%2F%2Ffile.moyublog.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657871632&t=e99d9db7d7e500aefcd2adadd237144c);

        }
    </style>
</head>
<body>
    
    <div class="box"></div>
</body>
</html>